 
/**
 * 预警信息
 */
<template>
  <div>  
    <div class="boxBlock">  
      <div class="serachTop"> 
          <!-- 搜索筛选 --> 
          <el-form :inline="true"  :model="formInline" class="user-search">
            <el-form-item >
              <el-input
                size="small"
                v-model="formInline.userId"
                placeholder="输入账号ID"
                type="number"
                clearable
              ></el-input>
            </el-form-item> 
            <el-form-item >  
                <el-date-picker
                    v-model="formInline.time"
                    size="small"
                    type="date" 
                    :value-format="'yyyy-MM-dd'"
                    :format="'yyyy-MM-dd'" 
                    :clearable="false" 
                  >
                </el-date-picker> 
            </el-form-item>

            <el-form-item >  
                 <el-select v-model="formInline.channel" placeholder="请选择" clearable  size="small"> 
                    <el-option
                      v-for="item in TypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                 </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search"
              >
                搜索
              </el-button>
            </el-form-item>
          </el-form>

      </div>

      <div class="wallet_box margin-t30"> 
      <!--列表-->
    
      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        style="width: 100%" 
      >
        <el-table-column prop="userId" label="用户ID" fixed="left" > </el-table-column> 
        <el-table-column prop="channel " label="渠道类型"  >  
          <template slot-scope="scope">   
            {{ scope.row.channel==0?'星链':'星汇' }}
          </template>
        </el-table-column> 

        <el-table-column
          prop="voidRate"
          label="拒付率"
          show-overflow-tooltip
        >
          <template slot-scope="scope">  
            <div v-if="Number(scope.row.voidRate)>=0">
              {{
                Number(scope.row.voidRate) == 0
                  ? "0%"
                  : Number(scope.row.voidRate*100).toFixed(0) + "%"
              }}
            </div>
            <div v-else>-</div>

          </template>
        </el-table-column> 
        <el-table-column
          prop="time"
          label="时间"
          show-overflow-tooltip
        >
        </el-table-column>
 
      </el-table> 
    </div>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>

 

    </div>

  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  numberNo,
  spStr,
  timestampSubTime
} from "../../utils/util";
import {
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  format,
  getUrl,
} from "../../api/axiosFun";
import Pagination from "../../components/Pagination"; 
export default {
  data() {
    return {
      info: null,
      b: format,
      numberNo: numberNo,
      listData: "", 
      formInline: {
        pageNum: 1,
        pageSize: 10,
        authType: "",
        loginName: "",
        userId: "",
        compute:0,
        time: new Date() // 使用utils中的format函数
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },  
      activeName:'0',
      changeDetailsVisible:false,
      curItem:{},
      TypeOptions:[
        {
          value: '0',
          label: '星链'
        },
        {
          value: '1',
          label: '星汇'
        },
       
      ]
    };
  },
  // 注册组件
  components: {
    Pagination, 
  },
  created() {
    this.getInfo();
    console.log(format(new Date(), 'yyyy-MM-dd'),'2222')

    const date = new Date();
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const formattedDate = `${year}-${month}-${day}`;

    this.getdata({
      ...this.formInline,
      time: formattedDate // 使用utils中的format函数
    });
  },
  methods: {
    showBalance(item) {
      this.curItem = item
      this.changeDetailsVisible = true
    },
    getInfo() {
      service
        .get("/api/admin/getData", {})
        .then((res) => {
          if (res.code == 0) {
            this.info = res.data;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
 
 
    getdata(parameter) {
      let url = getUrl(parameter);
      service
        .get('/api/admin/getSysWarningList' + url, {})
        .then((res) => {
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
  },
};
</script>

<style scoped>
.wallet_box {
  margin-top: 30px;
  border-radius: 20px;
}
 

.pro_box .el-col {
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/ .el-progress .el-progress-circle {
  width: 50px !important;
  height: 50px !important;
}
/deep/ .el-progress--circle .el-progress__text {
  font-size: 14px !important;
  font-weight: 600;
}
  
 
</style>
 
 